<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<h3>自定义公众号菜单</h3>
<ul v-if="menu">
    <!--<li><input id="m1" value="1" /></li>-->
    <!--<li><input id="m2" value="2" /></li>-->
    <li v-for="b in menu.button"><input id="m3" v-model="b.name" />
        <input size="100" v-model="b.url" />
    </li>
</ul>
<div v-else>等等</div>
</div>

<button onclick="updateWechatMenu()">确定</button>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script>
       var v = new Vue({
            el:"#app",
            data:{
                menu:null
            }
        });

        $(function(){
            $.get("/find_menu",{},function(data){
                v.menu = data;
                if(!v.menu){
                    v.menu = {"button":[
                        {name:"1",type:'view',url:'http://www.baidu.com'},
                        {name:"2",type:'view',url:'http://www.baidu.com'},
                        {name:"3",type:'view',url:'http://www.baidu.com'}
                    ]}
                }
                }
            )
        });

        function updateWechatMenu(){
            $.ajax({
                type:'post',
                url:'update_menu',
                data:JSON.stringify(v.menu),
                contentType: 'application/json;charset=utf-8',
                success:function(data){
                    console.log(data);
                }
            });

//            $.post("update_menu",{m1:m1.value,m2:m2.value,m3:m3.value},function(data){
//                if(data.errmsg=="ok"){
//                    alert("搞定！");
//                }else{
//                    alert("没搞定，请稍后重试！")
//                }
//            });
        }
    </script>


</body>
</html>